<html lang="ZH-CN">
<head>
    <meta charset="utf-8">
    <title>Web QrCode Test</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script type="text/javascript" src="http://www.ninboom.com/app/qrtest/js/jsqrcode/src/grid.js"></script>
    <script type="text/javascript" src="http://www.ninboom.com/app/qrtest/js/jsqrcode/src/version.js"></script>
    <script type="text/javascript" src="http://www.ninboom.com/app/qrtest/js/jsqrcode/src/detector.js"></script>
    <script type="text/javascript" src="http://www.ninboom.com/app/qrtest/js/jsqrcode/src/formatinf.js"></script>
    <script type="text/javascript" src="http://www.ninboom.com/app/qrtest/js/jsqrcode/src/errorlevel.js"></script>
    <script type="text/javascript" src="http://www.ninboom.com/app/qrtest/js/jsqrcode/src/bitmat.js"></script>
    <script type="text/javascript" src="http://www.ninboom.com/app/qrtest/js/jsqrcode/src/datablock.js"></script>
    <script type="text/javascript" src="http://www.ninboom.com/app/qrtest/js/jsqrcode/src/bmparser.js"></script>
    <script type="text/javascript" src="http://www.ninboom.com/app/qrtest/js/jsqrcode/src/datamask.js"></script>
    <script type="text/javascript" src="http://www.ninboom.com/app/qrtest/js/jsqrcode/src/rsdecoder.js"></script>
    <script type="text/javascript" src="http://www.ninboom.com/app/qrtest/js/jsqrcode/src/gf256poly.js"></script>
    <script type="text/javascript" src="http://www.ninboom.com/app/qrtest/js/jsqrcode/src/gf256.js"></script>
    <script type="text/javascript" src="http://www.ninboom.com/app/qrtest/js/jsqrcode/src/decoder.js"></script>
    <script type="text/javascript" src="http://www.ninboom.com/app/qrtest/js/jsqrcode/src/qrcode.js"></script>
    <script type="text/javascript" src="http://www.ninboom.com/app/qrtest/js/jsqrcode/src/findpat.js"></script>
    <script type="text/javascript" src="http://www.ninboom.com/app/qrtest/js/jsqrcode/src/alignpat.js"></script>
    <script type="text/javascript" src="http://www.ninboom.com/app/qrtest/js/jsqrcode/src/databr.js"></script>
</head>

<body>
<div class="booth text-center" style="margin-top:100px;">
    <video id="video" width="400" height="400"></video>
    <canvas id="qr-canvas" style="display: none;" width='400' height='400'></canvas>
    <div id='qrcodetext' style="background:antiquewhite;"></div>
</div>
<script>
    //初始化媒体对象
    var c = 0;
    var video = document.getElementById('video'),
        canvas = document.getElementById('qr-canvas'),
        img = document.getElementById('img'),
        qrcodetext = document.getElementById('qrcodetext'),
        vendorUrl = window.URL || window.webkitURL;

    canvas.addEventListener("dragenter", dragenter, false);
    canvas.addEventListener("dragover", dragover, false);
    canvas.addEventListener("drop", drop, false);
    //媒体对象
    function getUserMedia(constrains, success, error) {
        if(navigator.mediaDevices.getUserMedia) {
//最新标准API
            navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
        } else if(navigator.webkitGetUserMedia) {
//webkit内核浏览器
            navigator.webkitGetUserMedia(constrains).then(success).catch(error);
        } else if(navigator.mozGetUserMedia) {
//Firefox浏览器
            navigator.mozGetUserMedia(constrains).then(success).catch(error);
        } else if(navigator.getUserMedia) {
//旧版API
            navigator.getUserMedia(constrains).then(success).catch(error);
        }
    }
    //成功的回调函数
    function success(stream) {
//将视频流设置为video元素的源
        try {
            video.srcObject = stream; //新版本获取流的方式。
        } catch(error) {
            video.src = URL.createObjectURL(stream);
        }
        //播放视频
        video.play();
    }
    //异常的回调函数
    function error(error) {
        alert(error.message);
    }

    if(navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
        //调用用户媒体设备，访问摄像头
        getUserMedia({
            video: {
                width: 400,
                height: 400,
                /*
                facingMode: {
                    exact: "environment"
                }
                * */
            }
            //video: true
        }, success, error);
    } else {
        alert("你的浏览器不支持访问用户媒体设备");
    }

    //启动定时器
    setTimeout("actionP(null)", "1000");

    //定时器
    function actionP(data) {
        if(data == null) {
            Screenshot();
        } else {
            if(data != null & data != "error decoding QR Code") { //识别出数据
                qrcodetext.innerText=data+"\n"+qrcodetext.innerText;
// if(data.indexOf("http") != -1) {
// window.location.href = data;
// } else alert(data);

            }
//继续不管有没有扫描出数据，继续每秒一次扫描。
//如果想要识别出数据就停止，在这里添加else逻辑。
            setTimeout("actionP(null)", "1000");
        }

    }

    function Screenshot() { //截取图像
        canvas.getContext('2d').drawImage(video, 0, 0, 400, 400);
        var imgData = canvas.toDataURL("image/png");
        load(imgData);
    }
    ////////////////////////////////////////识别二维码////////////////////////////////////////////

    function dragenter(e) {
        e.stopPropagation();
        e.preventDefault();
    }

    function dragover(e) {
        e.stopPropagation();
        e.preventDefault();
    }

    function drop(e) {
        e.stopPropagation();
        e.preventDefault();

        var dt = e.dataTransfer;
        var files = dt.files;
    }

    function load(name) {
//initCanvas(400, 400);
//识别二维码并回调方法
        qrcode.callback = actionP;
        qrcode.decode(name);
    }
</script>
</body>

</html>